﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>IDrawUGuess</title>
  <link type="text/css" rel="Stylesheet" href="home.css" />
  <link type="text/css" rel="Stylesheet" href="metro.css" />
  <link type="text/css" rel="Stylesheet" href="bbutton.css" />
  <script type="text/javascript" src="../socket.io.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  <script type="text/javascript" src="javascript/metro.js"></script>
  <script type="text/javascript" src="../Lib/jquery-impromptu.3.1.min.js"></script>
  <script type="text/javascript">
    var usercount = 0;
    var userindex;
    var socket;
    var allusers = {};
    var username;
    var usermouses = [];
    var context;
    var drawing = false;
    var drawer;
    var roomtemplate;
    var lastPoint = null;
    var rooms;
    $(function () {
      socket = io.connect('http://localhost:4579');
      socket.on('connect', function () {
        roomtemplate = $('#roomtemplate').html();
        socket.emit('roomlist');
        socket.on('roomlist', function (msg) {
          rooms = msg;
          var roomHtml = '';
          for (var i = 0; i < msg.length; i++) {
            roomHtml += roomtemplate.replace('{Reply}', msg[i].reply)
              .replace('{Name}', msg[i].name)
              .replace(/{Status}/g, msg[i].status)
              .replace('{Count}', msg[i].count)
              .replace('{roomIndex}', msg[i].index);
          }
          $('#roomlist').html(roomHtml);
        });
      });

      socket.on('error', function (e) {
        
      });
    });

    function startGame() {
      for (var i = 0; i < rooms.length; i++) {
        if (rooms[i].index != i) {
          window.location.href = 'index.htm?room=' + i;
          return true;
        }
      }
      window.location.href = 'index.htm?room=' + i;
      return true;
    }
  </script>
</head>
<body class="md-body">
  <header id="header" class="md-header md-header-main">
    <h1>I Draw You Guess</h1>
    <div id="logo"></div>
    <a href="#" data-icon="★" class="button orange brackets glossy">Metro</a> 
    <a href="#" data-icon="☺" class="button pink brackets glossy">Classic</a>
    <a href="#" data-icon="☺" class="button pink brackets glossy">Mobile</a>
  </header>
  <div class="md-content">
    <div class="md-container">
      <div class="md-viewport md-viewport-horizontal">
        <div class="md-scrollable">
          <!-- The Introduction Panel section -->
          <section class="md-auto-max-width">
        <h2>Welcome to the game!</h2>
        <div style="width: 220px; margin-bottom: 30px;">
         You Draw I Guess - is very simple: You draw I guess. This is, the riddle driver draws the word(s) and all other participants guess it.
Everyone will be a driver at some point, as it alternates in a "circle".
        </div>
        <h2>Instructions</h2>
        <ul style="width: 220px">
				<li>Go to room area</li>
				<li>Choose or Create a Room</li>
				<li>Copy th URL on top and share with your friends</li>
				<li>If you're the driver:
					<ul>
						<li>Press "Start" to unveil the word(s)</li>
						<li>Start drawing the word</li>
						<li>Participate on the chat</li>
						<li>Skip the turn or wait for someone to guess or the time to run out</li>
					</ul>
				</li>	
				<li>If you're a participante:
					<ul>
						<li>Wait for the driver to start</li>
						<li>Start guessing</li>
						<li>Participate on the chat</li>
					</ul>
				</li>
				<li>Wait for another riddle and another driver</li>	
				<li>Repeat until boredom!</li>															
			</ul>
          </section>
          <section id="currentGamesSection" class="md-auto-max-width">
          <h2>Get Started</h2>
          <a href="#" onclick="return startGame();" data-icon="★" class="button orange brackets glossy">New Game</a> 
          <h2>Room List</h2>
          <ul id="roomtemplate" style="display: none">
          <li>
          <div class="sta">Reply<div>{Reply}</div></div>
          <div class="name">{Name}<div>{Count} / 6</div></div>
          <div class="status">
          <div class="button2 room_{Status}" onclick="window.location.href='index.htm?room={roomIndex}'">{Status}</div>
          </div>
          </li>
          </ul>
          <ul id="roomlist"></ul>
          </section>
          <!-- The Sharing center section -->
          <section id="main" class="md-auto-max-width">
          <h2>Sharing Center</h2>
          <div class="md-list-tiles md-auto-arrange-tiles">
                <div class="md-list-item md-list-tile-large">
                  <a href="#"><div class="md-list-item-image" style="overflow: hidden;">
                      <img src="images/sample01.jpg" style="width: 100%;">
                    </div><div class="md-list-item-overlay">
                      <div class="md-list-item-big-text">Shared User: Metro David</div>
                      <div class="md-list-item-small-text">Metro David shared his newly created draft at sharing center</div>
                    </div></a>
                </div>
                <div class="md-list-item md-list-tile-large">
                  <a href="#"><div class="md-list-item-image" style="overflow: hidden;">
                      <img src="images/sample02.jpg" style="width: 100%;">
                    </div><div class="md-list-item-overlay">
                      <div class="md-list-item-big-text">Shared User: Alice Yang</div>
                      <div class="md-list-item-small-text">Gues what is this?? -- Alice Yang</div>
                    </div></a>
                </div>
                <div class="md-list-item md-list-tile-large">
                  <a href="#"><div class="md-list-item-image" style="overflow: hidden;">
                      <img src="images/sample03.jpg" style="width: 100%;">
                    </div><div class="md-list-item-overlay">
                      <div class="md-list-item-big-text">Shared User: Alice Yang</div>
                      <div class="md-list-item-small-text">Gues what is this?? -- Alice Yang</div>
                    </div></a>
                </div>
                <div class="md-list-item md-list-tile-large">
                  <a href="#"><div class="md-list-item-image" style="overflow: hidden;">
                      <img src="images/sample04.jpg" style="width: 100%;">
                    </div><div class="md-list-item-overlay">
                      <div class="md-list-item-big-text">Shared User: Alice Yang</div>
                      <div class="md-list-item-small-text">Gues what is this?? -- Alice Yang</div>
                    </div></a>
                </div>
              </div>
          </section>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    var waitForFinalEvent = (function () {
      var timers = {};
      return function (callback, ms, uniqueId) {
        if (!uniqueId) {
          uniqueId = "Don't call this twice without a uniqueId";
        }
        if (timers[uniqueId]) {
          clearTimeout(timers[uniqueId]);
        }
        timers[uniqueId] = setTimeout(callback, ms);
      };
    })();

    $(window).resize(function () {
      waitForFinalEvent(function () {
        MD.UI.recalculateAll();
      }, 200, "era1");
    });
  </script>
</body>
</html>
